<!--
 * @Author: 刘凯欣
 * @Date: 2024-06-26 17:29:08
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2024-06-27 16:25:09
 * @Description: 
-->
<template>
  <div>
    <el-date-picker
      v-model="date"
      :picker-options="{ firstDayOfWeek: 1 }"
      type="date"
      placeholder="选择日期"
    />
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="name" label="店铺名称" width="180" />
      <el-table-column prop="cancelNumber" label="取消单数" />
      <el-table-column prop="totalNumber" label="推单数" />
      <el-table-column prop="cancellation" label="取消率">
        <template #default="scope">
          <!-- 将取消率显示为百分比 -->
          {{ (scope.row.cancellation * 100).toFixed(2) }}%
        </template>
      </el-table-column>
      <el-table-column label="预估取消率">
        <!-- <template #default="scope">         
          {{ getEstimatedCancellation(scope.row).value }}% -- (差
          {{ getEstimatedCancellation(scope.row).remaining }} 单)
        </template> -->
        <template #default="scope">
          {{ getNumbers(scope.row).value }}% -- (差
          {{ getNumbers(scope.row).remaining }} 单)
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: "ElementTestTestTable",

  data() {
    return {
      date: "",
      tableData: [
        {
          name: "商家1",
          cancelNumber: "8", //取消单数
          totalNumber: "120", //推单数
          cancellation: "0.0667", //取消率 百分比 等于6.67%
        },
        {
          name: "商家2",
          cancelNumber: "1", //取消单数
          totalNumber: "40", //推单数
          cancellation: "0.025", //取消率 百分比 等于2.50%
        },
        {
          name: "商家3",
          cancelNumber: "2", //取消单数
          totalNumber: "28", //推单数
          cancellation: "0.0714", //取消率 百分比 等于7.14%
        },
      ],
      Cancellation: [
        {
          name: "取消率：≥",
          type: "1",
          value: "3",
          colorName: "预警颜色",
          colorValue: "orange",
        },
        {
          name: "取消率：≥",
          type: "1",
          value: "5",
          colorName: "预警颜色",
          colorValue: "red",
        },
        {
          name: "取消率：≥",
          type: "1",
          value: "10",
          colorName: "预警颜色",
          colorValue: "blue",
        },
      ],
    };
  },
  methods: {
    getEstimatedCancellation(row) {
      // 取消率是通过 取消单数除以推单数 获取；
      // 预估取消率是 通过当前这行的 取消单率cancellation 与 Cancellation数组中每一项比较 value值，当value值 大于 cancellation 值（需要百分比转换），返回当前项的value值；如果cancellation值大于全部的value值，则返回数组中最大值的选项value值；
      // 如果 tableData 中 商家3的 预估取消率  是 10，需要返回 退单数还差几单 退单率就达到10%，返回差几单；展示效果： 预估取消率 10%--(差？单)；
      // 如果 商家3 的 取消率是0.11也就是11%；预估取消率是10%；取下率 比 Cancellation 数组中的value 都大，则返回 最大值value；  展示效果：预估取消率 10%--(差0单)；
      const cancellationPercentage = row.cancellation * 100;
      // 找到第一个大于取消率的 value
      let estimated = this.Cancellation.find(
        (item) => item.value > cancellationPercentage
      );

      if (!estimated) {
        // 没找到就用最大的 value
        estimated = this.Cancellation.reduce((max, item) =>
          item.value > max.value ? item : max
        );
      }

      const estimatedValue = estimated.value;

      // 计算差几单
      const requiredCancellations = Math.ceil(
        (estimatedValue / 100) * row.totalNumber
      );
      const remainingCancellations = Math.max(
        0,
        requiredCancellations - row.cancelNumber
      );

      return {
        value: estimatedValue,
        remaining: remainingCancellations,
      };
    },
  },
};
</script>
